<template>
  <div>
    <h1>我是List</h1>
    <h2>我的count的值是{{ count }}</h2>
    <h3>我的price的值是{{ price }}</h3>
    <button @click="axiosList">请求电影列表</button>
    <button @click="axiosListN({ n: 2, m: 6 })">按条件 请求电影列表</button>

    <ul>
      <li v-for="item in movie" :key="item.tvId">{{ item.albumName }}</li>
    </ul>
    <ul>
      <li v-for="item in getterList " :key="item.tvId">{{ item.albumName }}</li>
    </ul>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapState } from "vuex";
export default {
  name: "List",
  computed: {
    count() {
      return this.$store.state.count.count;
    },
    ...mapState("count",["price"]),
    ...mapState("count",["movie"]),
    ...mapGetters("count",["getterList"])
  },
  methods: {
    ...mapActions("count",["axiosList"]),
    axiosListN() {
      this.$store.dispatch("count/axiosListN", { n: 2, m: 6 });
    },
  },
};
</script>

<style>
</style>